<template>
	<view class="container">
		<view class="msg-text"> 基本用法 </view>
		<l-tabs :list="tabsList1"></l-tabs>

		<view class="msg-text">传入对象 控制初始选中 </view>
		<l-tabs :list="tabsList" keyName="name" v-model="active"></l-tabs>

		<view class="msg-text">带有下划线 </view>
		<l-tabs :list="tabsList1" :lineShow="true" lineColor="#e9392f" :lineScale="1.2"></l-tabs>

		<view class="msg-text"> 靠左排列 自定义选中文字颜色及大小 自定义下划线样式</view>
		<l-tabs
			:list="tabsList"
			activeTextColor="#333"
			layout="left"
			keyName="name"
			:lineShow="true"
			:lineCrude="6"
			:activeSize="16"
			linePlace="26px"
			lineColor="linear-gradient(to right, #e9392f 30%, #f2d6d6)"
		></l-tabs>

		<view class="msg-text">滚动</view>
		<l-tabs :list="tabsList2" layout="scroll" :lineShow="true" keyName="name" @choose="tabChange"></l-tabs>

		<view class="msg-text">分割线</view>
		<l-tabs :list="tabsList" :splitLine="true" keyName="name"></l-tabs>
		<view class="" style="height: 100vh;"></view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            active: 2,
            tabsList: [{ name: '产品' }, { name: '前端开发' }, { name: '美工' }, { name: '后端开发' }],
            tabsList1: ['产品产品', '前端开发', '美工设计', '后端开发'],
            tabsList2: [
                { name: '产品' },
                { name: '前端' },
                { name: '美工' },
                { name: '后端' },
                { name: '测试' },
                { name: '运维' },
                { name: '人力' },
                { name: '产品' },
                { name: '美工' },
                { name: '前端' },
                { name: '后端' },
                { name: '测试' },
                { name: '运维' },
                { name: '人力' }
            ]
        }
    },
    watch: {
        active(val) {
            console.log('val', val)
        }
    },
    methods: {
        tabChange({ index, item }) {
            console.log(index, item)
        }
    }
}
</script>

<style>
.container {
	font-size: 14px;
	line-height: 24px;
}
.msg-text {
	height: 40px;
	line-height: 20px;
	font-size: 12px;
	color: #666;
	padding: 20px 0 0 15px;
	box-sizing: border-box;
}
</style>
